/*
  定义flex布局
*/

.flex-app (@flex, @flex-box) {
  [@{flex}] {
    display: flex;
    &>* {
      display: block;
    }
    &>[@{flex}] {
      display: flex;
    }
  }
  /*
    主轴方向：从左到右(默认)
  */
  [@{flex}~="dir:left"] {
    flex-direction: row;
  }


  /*
    主轴方向：从右到左
  */
  [@{flex}~="dir:right"] {
    flex-direction: row-reverse;
    -webkit-box-pack: end; //修复旧版本主轴和标准主轴flex表现不一致的bug
  }


  /*
    主轴方向：从上到下
  */
  [@{flex}~="dir:top"] {
    flex-direction: column;
  }


  /*
    主轴方向：从下到上
  */
  [@{flex}~="dir:bottom"] {
    flex-direction: column-reverse;
    -webkit-box-pack: end; //修复旧版本主轴和标准主轴flex表现不一致的bug
  }

  /*
    主轴对齐方式：从左到右(默认)
  */
  [@{flex}~="main:left"] {
    justify-content: flex-start;
  }


  /*
    主轴对齐方式：从右到左
  */
  [@{flex}~="main:right"] {
    justify-content: flex-end;
  }


  /*
    主轴对齐方式：两端对齐
  */
  [@{flex}~="main:justify"] {
    justify-content: space-between;
  }


  /*
    主轴对齐方式：居中对齐
  */
  [@{flex}~="main:center"] {
    justify-content: center;
  }

  /*
    交叉轴齐方式：从上到下(默认)
  */
  [@{flex}~="cross:top"] {
    align-items: flex-start;
  }


  /*
    交叉轴齐方式：从下到上
  */
  [@{flex}~="cross:bottom"] {
    align-items: flex-end;
  }


  /*
    交叉轴齐方式：居中对齐
  */
  [@{flex}~="cross:center"] {
    align-items: center;
  }


  /*
    交叉轴齐方式：跟随内容高度对齐
  */
  [@{flex}~="cross:baseline"] {
    align-items: baseline;
  }


  /*
    交叉轴齐方式：高度并排铺满
  */
  [@{flex}~="cross:stretch"] {
    align-items: stretch;
  }

  /*
    子元素平分宽度
  */
  [@{flex}~="box:mean"]>*, //所有元素
  [@{flex}~="box:first"]>*, //第一个子元素
  [@{flex}~="box:last"]>*, //最后一个子元素
  [@{flex}~="box:justify"]>* //两端第一个子元素
  {
    width: 0%;
    height: auto;
    flex-grow: 1;
    flex-shrink: 1;
  }

  [@{flex}~="box:first"]>*:first-child, //第一个子元素
  [@{flex}~="box:last"]>*:last-child, //最后一个子元素
  [@{flex}~="box:justify"]>*:first-child, //两端第一个子元素
  [@{flex}~="box:justify"]>*:last-child //两端最后一个子元素
  {
    width: auto;
    flex-grow: 0;
    flex-shrink: 0;
  }
  /*
    子元素平分高度
  */
  [@{flex}~="dir:top"][@{flex}~="box:mean"]>*,
  [@{flex}~="dir:top"][@{flex}~="box:first"]>*, //第一个子元素
  [@{flex}~="dir:top"][@{flex}~="box:last"]>*, //最后一个子元素
  [@{flex}~="dir:top"][@{flex}~="box:justify"]>*, //两端最后一个子元素
  [@{flex}~="dir:bottom"][@{flex}~="box:mean"]>*,
  [@{flex}~="dir:bottom"][@{flex}~="box:first"]>*, //第一个子元素
  [@{flex}~="dir:bottom"][@{flex}~="box:last"]>*, //最后一个子元素
  [@{flex}~="dir:bottom"][@{flex}~="box:justify"]>* //两端最后一个子元素
  {
    width: auto;
    height: 0;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [@{flex}~="dir:top"][@{flex}~="box:first"]>*:first-child, //第一个子元素
  [@{flex}~="dir:top"][@{flex}~="box:last"]>*:last-child, //最后一个子元素
  [@{flex}~="dir:top"][@{flex}~="box:justify"]>*:first-child, //两端第一一个子元素
  [@{flex}~="dir:top"][@{flex}~="box:justify"]>*:last-child, //两端最后一个子元素
  [@{flex}~="dir:bottom"][@{flex}~="box:first"]>*:first-child, //第一个子元素
  [@{flex}~="dir:bottom"][@{flex}~="box:last"]>*:last-child, //最后一个子元素
  [@{flex}~="dir:bottom"][@{flex}~="box:justify"]>*:first-child //两端第一一个子元素
  [@{flex}~="dir:bottom"][@{flex}~="box:justify"]>*:last-child //两端最后一个子元素
  {
    height: auto;
    flex-grow: 0;
    flex-shrink: 0;
  }

  //子元素伸缩比例循环
  .flex-box(10);
  .flex-box(@n, @i: 0) when (@i =< @n) {
    [@{flex-box}="@{i}"] {
      flex-grow: @i;
      flex-shrink: @i;
    }
    .flex-box(@n, (@i + 1));
  }
}
